<template>
  <div class="appraisal">
    <header>
      <div class="container" style="border: none; padding: 0">
        <div class="title">
          <img src="../../assets/img/evaluation.png" alt="">
        </div>
      </div>
    </header>
    <main>
      <div
        v-for="(item,index) in appraisalList "
        :key="index"
        :class="item.className"
        class="appraisal">
        <div class="container">
          <div class="left">
            <img :src="item.src" alt="">
          </div>
          <div class="right">
            <h3>{{item.name}}<span>（已有{{item.overNum}}人完成测评）</span></h3>
            <p>{{item.text}}</p>
            <div class="rightBottom">
            <div class="box">使用次数：{{item.useNum}}次</div>
            <div class="box"><el-button size="mini">点击进入</el-button></div>
          </div>
          </div>
        </div>
      </div>
      <div class="autognosis">
        <div class="container">
          <div class="top">
            <div class="title">自我认知</div>
            <p>面对现在及未来的各种可能，我们如何去走？</p>
            <p>尼采云：“聪明的人只要能认识自己，便什么也不会失去。”</p>
            <p>其中认识自我包含多个重要的因素，如性格、兴趣、能力以及价值观等，只有建立在对自己全面了解基础上，才可能最终实现自己的目标。</p>
            <p>以下四个测验，请各位同学按照自身情况进行作答，每个测试答题时间约在5-10分钟。</p>
          </div>
          <div class="bottom">
            <el-steps :active="autognosis.active" align-center>
              <el-step
                v-for="(item,index) in autognosis.titleList"
                :key="index"
                :title="item"></el-step>
            </el-steps>
            <div class="testList">
              <div
                v-for="(item,index) in autognosis.testList"
                :key="index"
                class="testBOX">
                <div class="test">
                  <a href="">
                    <div :style="{backgroundImage: 'url(' + item.img + ')'}" class="testBox">
                      <p><span>{{item.num}}已测</span></p>
                    </div>
                    <div class="testBg"></div>
                  </a>
                </div>
                <div class="textP">
                  <span>{{item.text}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
    export default {
        name: "appraisal",
        data() {
            return {
                appraisalList: [
                    {
                        className: 'seniorAppraisal',
                        src: require('../../assets/img/seniorAppraisal.png'),
                        name: '高中生选科测评',
                        overNum: '364,025',
                        text: '《高中生选科测评》已升级为智能选科系统 ，目前此测评仅保留已完成的测评报告，不支持完成新的测评；如需选科指导，请进入智能选科系统，内包含更丰富的指导课程、测评工具等，帮助你完成科学选科。',
                        useNum: 0
                    },
                    {
                        className: 'majorCheckAppraisal',
                        src: require('../../assets/img/majorCheckAppraisal.png'),
                        name: '升学专业选择测评',
                        overNum: '654,366',
                        text: '本测评系统根据国际权威的性格量表和兴趣量表，并参照国家教育部权威发布的《普通高等学校本科专业目录（2020年版）》，深度剖析你的人格特质,职业兴趣和专业兴趣，帮助你清晰地认识自我，更科学地选择大学专业，更合理地规划职业生涯。',
                        useNum: 0
                    }
                ],
                autognosis: {
                    active: 1,
                    titleList: ['人格类型测试 (MBTI)','霍兰德职业兴趣测试 (SDS)','多元智能测试 (MI)','生涯价值观测试 (CVT)'],
                    testList: [
                        {'img': require('../../assets/img/test1.png'), 'num': '2,111,333', 'text': 'MBTI从纷繁复杂的个性特征中，将不同个性的人区别开来'},
                        {'img': require('../../assets/img/test2.png'), 'num': '2,111,222', 'text': 'MBTI从纷繁复杂的个性特征中，将不同个性的人区别开来'},
                        {'img': require('../../assets/img/test1.png'), 'num': '2,111,345', 'text': 'MBTI从纷繁复杂的个性特征中，将不同个性的人区别开来'},
                        {'img': require('../../assets/img/test2.png'), 'num': '2,111,555', 'text': 'MBTI从纷繁复杂的个性特征中，将不同个性的人区别开来'}
                    ]
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../styles/common.scss';
  @import '../../styles/appraisal/appraisal.scss';
</style>